<template>
  <view class="detail-bms-item">
    <view>
      <chartPage
        :innerRingColor="
          dataListSummaryDataBMS.workStatusType == -1 // 故障
            ? '#FA3B3D'
            : dataListSummaryDataBMS.workStatusType == 0 // 空闲
            ? '#64B7F6'
            : dataListSummaryDataBMS.workStatusType == 1 // 运行
            ? '#34C759'
            : ''
        "
        :fillBgColor="
          dataListSummaryDataBMS.workStatusType == -1 // 故障
            ? 'linear-gradient(180deg, #0F1F2F 2%, #FA3B3D 86%)'
            : dataListSummaryDataBMS.workStatusType == 0 // 空闲
            ? 'linear-gradient(180deg, #0F1F2F 2%, #64B7F6 86%)'
            : dataListSummaryDataBMS.workStatusType == 1 // 运行
            ? 'linear-gradient(180deg, #0F1F2F 2%, #34C759 86%)'
            : ''
        "
        :batteryPercentage="Number(dataListSummaryDataBMS.batteryPackSOC)"
        :title="'SOC'"
      />
    </view>
    <template v-if="!props.moduleType">
      <up-row style="margin-top: 30rpx">
        <up-col span="6">
          <view class="row-detail">
            <image
              class="row-detail-img"
              src="/static/batteryPackCurrent.png"
              mode=""
            />
            <view class="number">
              <text>
                {{
                  formatCurrent(dataListSummaryDataBMS.batteryPackElec).value
                }}
              </text>
              <text class="unit">
                {{
                  formatCurrent(dataListSummaryDataBMS.batteryPackElec).templete
                }}
              </text>
            </view>
            <view class="name">
              {{ t("equipmentDetail.batteryPackCurrent") }}
            </view>
          </view>
        </up-col>
        <up-col span="6">
          <view class="row-detail">
            <image
              class="row-detail-img"
              src="/static/batteryPackVoltage.png"
              mode=""
            />
            <view class="number">
              <text> {{ dataListSummaryDataBMS.batteryPackVoltage }} </text>
              <text class="unit">V</text>
            </view>
            <view class="name">
              {{ t("equipmentDetail.batteryPackVoltage") }}
            </view>
          </view>
        </up-col>
      </up-row>

      <up-row style="margin-top: 30rpx">
        <up-col span="6">
          <view class="row-detail">
            <image
              class="row-detail-img"
              src="/static/power-detail-icon.png"
              mode=""
            />
            <view class="number">
              <text>
                {{ powerUnit(dataListSummaryDataBMS.batteryPackPower, 0) }}
              </text>
              <text class="unit">
                {{ powerUnit(dataListSummaryDataBMS.batteryPackPower, 1) }}
              </text>
            </view>
            <view class="name">
              {{ t("equipmentDetail.batteryPackPower") }}
            </view>
          </view>
        </up-col>
        <up-col span="6">
          <view class="row-detail">
            <image class="row-detail-img" src="/static/power-s.png" mode="" />
            <view class="number">
              {{ dataListSummaryDataBMS.batteryPackSOH }} %
            </view>
            <view class="name">
              {{ t("equipmentDetail.batteryClusterSoh") }}
            </view>
          </view>
        </up-col>
      </up-row>
    </template>
    <template v-else>
      <up-row style="margin-top: 30rpx">
        <up-col span="6">
          <view class="row-detail-module">
            <image
              class="row-detail-img"
              src="/static/batteryPackCurrent.png"
              mode=""
            />
            <view class="number">
              <view>
                {{
                  formatCurrent(dataListSummaryDataModuleBMS.batteryPackElec)
                    .value
                }}
                {{
                  formatCurrent(dataListSummaryDataModuleBMS.batteryPackElec)
                    .templete
                }}
              </view>
              <view class="unit">{{
                t("equipmentDetail.totalCurrentOfTheBatteryCluster")
              }}</view>
            </view>
          </view>
        </up-col>

        <up-col span="6">
          <view class="row-detail-module">
            <image
              class="row-detail-img"
              src="/static/batteryPackVoltage.png"
              mode=""
            />
            <view class="number">
              <view>
                {{ dataListSummaryDataModuleBMS.batteryPackVoltage }} V
              </view>
              <view class="unit">{{
                t("equipmentDetail.batteryClusterVoltage")
              }}</view>
            </view>
          </view>
        </up-col>
      </up-row>
      <up-row style="margin-top: 30rpx">
        <up-col span="6">
          <view class="row-detail-module">
            <image
              class="row-detail-img"
              src="/static/power-detail-icon.png"
              mode=""
            />
            <view class="number">
              <view>
                {{ formatPower(dataListSummaryDataModuleBMS.batteryPackPower) }}
              </view>
              <view class="unit">{{
                t("equipmentDetail.batteryClusterPower")
              }}</view>
            </view>
          </view>
        </up-col>
        <up-col span="6">
          <view class="row-detail-module">
            <image class="row-detail-img" src="/static/power-s.png" mode="" />
            <view class="number">
              <view>{{ dataListSummaryDataModuleBMS.batteryPackSOH }} %</view>
              <view class="unit"
                >{{ t("equipmentDetail.batteryClusterSoh") }}
              </view>
            </view>
          </view>
        </up-col>
      </up-row>
      <up-row style="margin-top: 30rpx">
        <up-col span="6">
          <view class="row-detail-module">
            <image
              class="row-detail-img"
              src="/static/batteryPackCurrent.png"
              mode=""
            />
            <view class="number">
              <view>
                {{
                  formatCurrent(
                    dataListSummaryDataModuleBMS.maximumChargingCurrent
                  ).value
                }}
                {{
                  formatCurrent(
                    dataListSummaryDataModuleBMS.maximumChargingCurrent
                  ).templete
                }}
                <!-- {{ dataListSummaryDataModuleBMS.maximumChargingCurrent }} A -->
              </view>
              <view class="unit">
                {{ t("equipmentDetail.maximumChargingCurrent") }}
              </view>
            </view>
          </view>
        </up-col>
        <up-col span="6">
          <view class="row-detail-module">
            <image
              class="row-detail-img"
              src="/static/batteryPackCurrent.png"
              mode=""
            />
            <view class="number">
              <view>
                {{
                  formatCurrent(
                    dataListSummaryDataModuleBMS.maximumDischargingCurrent
                  ).value
                }}
                {{
                  formatCurrent(
                    dataListSummaryDataModuleBMS.maximumDischargingCurrent
                  ).templete
                }}
                <!-- {{ dataListSummaryDataModuleBMS.maximumDischargingCurrent }} A -->
              </view>
              <view class="unit">{{
                t("equipmentDetail.maximumDischargeCurrent")
              }}</view>
            </view>
          </view>
        </up-col>
      </up-row>
      <up-row>
        <up-col span="6" class="set-col">
          <view class="row-detail-module">
            <image
              class="row-detail-img"
              src="/static/batteryPackVoltage.png"
              mode=""
            />
            <view class="number">
              <view>
                {{ dataListSummaryDataModuleBMS.maxMonomerVoltage }} V
              </view>
              <view class="unit">
                {{ t("equipmentDetail.highestCellVoltage") }}</view
              >
            </view>
          </view>
        </up-col>
        <up-col span="6" class="set-col">
          <view class="row-detail-module">
            <image
              class="row-detail-img"
              src="/static/batteryPackVoltage.png"
              mode=""
            />
            <view class="number">
              <view>
                {{ dataListSummaryDataModuleBMS.mixMonomerVoltage }} V
              </view>
              <view class="unit">{{
                t("equipmentDetail.lowestCellVoltage")
              }}</view>
            </view>
          </view>
        </up-col>
        <up-col span="6" class="set-col">
          <view class="row-detail-module">
            <image
              class="row-detail-img"
              src="/static/batteryPackCurrent.png"
              mode=""
            />
            <view class="number">
              <view>
                {{ dataListSummaryDataModuleBMS.maxSingleTemperature }} ℃
              </view>
              <view class="unit">
                {{ t("equipmentDetail.maximumCellTemperature") }}</view
              >
            </view>
          </view>
        </up-col>
        <up-col span="6" class="set-col">
          <view class="row-detail-module">
            <image
              class="row-detail-img"
              src="/static/batteryPackCurrent.png"
              mode=""
            />
            <view class="number">
              <view>
                {{ dataListSummaryDataModuleBMS.minSingleTemperature }} ℃
              </view>
              <view class="unit">{{
                t("equipmentDetail.minimumCellTemperature")
              }}</view>
            </view>
          </view>
        </up-col>
      </up-row>
    </template>
  </view>
</template>

<script setup>
import { powerUnit, formatPower, formatCurrent } from "@/utils/utils";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const props = defineProps({
  dataListSummaryDataBMS: {
    type: Object,
    default: {},
  },
  moduleType: {
    type: Boolean,
    default: false,
  },
  dataListSummaryDataModuleBMS: {
    type: Object,
    default: {},
  },
});
</script>

<style scoped lang="scss">
.detail-bms-item {
  width: 100%;
  box-sizing: border-box;
  background: #132034;
  border-radius: 32rpx;
  margin-top: 30rpx;
  padding-top: 30rpx;
  padding-bottom: 40rpx;
  .row-detail {
    width: 100%;
    text-align: center;
    .row-detail-img {
      width: 80rpx;
      height: 80rpx;
    }
    .number {
      margin-top: 20rpx;
      font-family: D-DIN;
      text-align: center;
      color: #ffffff;
      /* 106.98 */
      font-family: D-DIN;
      font-weight: 700;
      font-size: 40rpx;
      .unit {
        font-size: 28rpx;
      }
    }
    .name {
      font-family: Alibaba PuHuiTi 3;
      font-size: 20rpx;
      font-weight: normal;
      text-align: center;
      font-variation-settings: "opsz" auto;
      font-feature-settings: "kern" on;
      color: #9e9e9e;
      margin-top: 20rpx;
    }
  }
}

.row-detail-module {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 30rpx;
  box-sizing: border-box;
  .row-detail-img {
    width: 80rpx;
    height: 80rpx;
    margin-right: 24rpx;
  }
  .number {
    font-family: D-DIN;
    font-size: 36rpx;
    font-weight: bold;
    color: #ffffff;
    .unit {
      font-family: Alibaba PuHuiTi 3;
      font-size: 20rpx;
      font-weight: normal;
      margin-top: 20rpx;
      font-variation-settings: "opsz" auto;
      font-feature-settings: "kern" on;
      color: #9e9e9e;
    }
  }
}
:deep(.u-row) {
  flex-wrap: wrap;
  .set-col {
    margin-top: 30rpx;
  }
}
</style>
